import React, { Component } from 'react';
import ThePagination from "@/components/ThePagination";
import { Form, Input,Space, Button, message, Modal } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import { apiTSysDictionariesDel, apiTSysDictionariesEdit, apiTSysDictionariesAdd, apiTSysDictionariesPage, apiTSysDictionariesView } from '@/request/storageManager/store.js'
export default class outPutDataType extends Component {
    constructor() {
        super()
        this.formRef = React.createRef()
        this.state = {
            columns: [
                {
                    title: "库存类型名称",
                    dataIndex: "remark",
                    key: "remark",
                },
                {
                    title: "库存类型值",
                    dataIndex: "value",
                    key: "value",
                },
                {
                    title: "排序",
                    dataIndex: "sort",
                    key: "sort",
                },
                {
                    title: "操作",
                    dataIndex: "serviceShowFile",
                    key: "serviceShowFile",
                    render: (text, render) => {
                        return <div>
                            <TheButton haspermi={['storage:store:outPutEdit']} onClick={() => this.edit(render)}>编辑</TheButton>
                            {
                               ['0','1','2','3','4','5'].includes(render.value) ? '' : <TheButton haspermi={['storage:store:outPutDel']}  onClick={() => this.del(render)}>删除</TheButton>
                            }
                        </div>
                    }
                },
            ],
            dataSource: [],
            pageData: {
                pageNo: 1,
                pageSize: 10

            },
            total: 0,
            isModalVisible: false,
            remark: '',
            modalTitle: '',
            dictionariesId: '',
        }
    }
    componentDidMount() {
        this.getData()
    }
    async getData() {
        let res = await apiTSysDictionariesPage({
            pageNo: this.state.pageData.pageNo,
            pageSize: this.state.pageData.pageSize,
            name: 'out_library_type',
        })
        if (res.code === 0) {
            this.setState({
                dataSource: res.data,
                total: res.totalCount
            })
        }
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo, pageSize
            }
        }, () => {
            this.getData()
        })
    };
    async del(row) {
        React.$confirm({
            title: "提示",
            type: 'warning',
            content: "确定是否删除？",
            onOk: async () => {
                let res = await apiTSysDictionariesDel({ dictionariesId: row.dictionariesId })
                if (res.code === 0) {
                    message.success(res.codeMessage)
                    this.pageChange(1, 10)
                }
            }
        });

    }
    async edit(row) {
        let res = await apiTSysDictionariesView({ dictionariesId: row.dictionariesId})
        if (res.code === 0) {
            this.setState({
                isModalVisible: true,
                dictionariesId: row.dictionariesId,
                modalTitle: '编辑'
            }, () => {
                this.formRef.current.setFieldsValue({
                    remark: res.data.remark,
                    value: res.data.value,
                    sort: res.data.sort,
                })
            })

        }
    }
    reset() {
        this.formRef.current.setFieldsValue({
            remark: '',
            value: '',
            sort: '',
        })
    }
    async onFinish(values) {
        if (this.state.dictionariesId === '') {
            let res = await apiTSysDictionariesAdd({ ...values, name: 'out_library_type' })
            if (res.code === 0) {
                message.success(res.codeMessage)
                this.pageChange(1, 10)
                this.reset()
                this.setState({
                    isModalVisible: false,
                    dictionariesId: '',
                })
            }
        } else {
            let res = await apiTSysDictionariesEdit({ ...values, dictionariesId: this.state.dictionariesId, name: 'out_library_type' })
            if (res.code === 0) {
                message.success(res.codeMessage)
                this.pageChange(1, 10)
                this.reset()
                this.setState({
                    isModalVisible: false,
                    dictionariesId: '',
                })
            }
        }

    }
    render() {
        let { columns, dataSource, modalTitle, pageData, total, isModalVisible} = this.state
        return (
            <div className="p-layout-box commodity-examine">
                <div
                    className="p-search-box"
                >
                    <TheButton haspermi={['storage:store:outPutAdd']} size="middle" onClick={() => this.setState({
                        isModalVisible: true, modalTitle: '新增'
                    })} type="primary" >新增</TheButton>
                </div>
                <div className="p-layout-content-pagination">
                    <TheTable
                        scroll={{ x: "max-content", y: '63vh' }}
                        columns={columns}
                        dataSource={dataSource}
                    />
                    <ThePagination
                        pageNo={pageData.pageNo}
                        pageSize={pageData.pageSize}
                        total={total}
                        pageChange={this.pageChange}
                    />
                </div>
                <Modal title={modalTitle} visible={isModalVisible} width="20%"
                    onCancel={
                        () => {
                            this.setState({ isModalVisible: false })
                            this.reset()
                        }
                    } 
                    footer={null}
                >
                    <Form
                        labelCol={{
                            span: 8
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        ref={this.formRef}
                        onFinish={(values) => this.onFinish(values)}
                    >
                        <Form.Item
                            label="库存管理名称"
                            name="remark"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入库存管理名称',
                                },
                            ]}
                        >
                            <Input style={{
                            }} placeholder='库存管理名称' maxLength={40} />
                        </Form.Item>
                        <Form.Item
                            label="库存管理值"
                            name="value"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入库存管理值',
                                },
                            ]}
                        >
                            <Input style={{
                            }} placeholder='库存管理值(数字)' type='number' />
                        </Form.Item>
                        <Form.Item
                            label="排序"
                            name="sort"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入排序',
                                },
                            ]}
                        >
                            <Input style={{
                            }} placeholder='排序(数字)' type='number'/>
                        </Form.Item>
                        <Form.Item wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}>
                            <Space size="small" style={{ marginLeft: 10 }}>

                                <Button type="default" onClick={() => this.reset()}>
                                    重置
                                </Button>
                                <Button type="primary" htmlType="submit">
                                    确定
                                </Button>
                            </Space>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}
